<template>
  <div>
    <div id="mychart2" style=" height:500px"></div>
  </div>
</template>

<script>
// var echarts = require('echarts')
export default {
  data () {
    return {
      mytestdata2: null
    }
  },
  methods: {},
  props: ['mytest_data2'],
  mounted () {
    console.log(this.mytest_data2)
    this.mytestdata2 = this.mytest_data2

    var getData = this.mytestdata2.data
    // 基于准备好的dom，初始化echarts实例
    var myChart = this.$echarts.init(document.getElementById('mychart2'))
    myChart.showLoading({
      text: '加载中。。。。',
      color: '#000',
      textColor: '#000',
      maskColor: 'rgba(255, 255, 255, 0.8)',
      zlevel: 0
    })

    window.addEventListener('resize', function () {
      /// /图表响应式
      myChart.resize()
    })
    // 绘制折线图表
    var option = {
      title: {
        text: getData.title,
        subtext: '纯属虚构'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['维修', '产出', '良率']
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: getData.weekday
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '维修',
          type: 'line',
          smooth: true,
          itemStyle: { normal: { areaStyle: { type: 'default' } } },
          data: getData.fixTimes.data
        },
        {
          name: '产出',
          type: 'line',
          smooth: true,
          itemStyle: { normal: { areaStyle: { type: 'default' } } },
          data: getData.outputs.data
        },
        {
          name: '良率',
          type: 'line',
          smooth: true,
          itemStyle: { normal: { areaStyle: { type: 'default' } } },
          data: getData.yeils.data
        }
      ]
    }

    myChart.hideLoading()
    myChart.setOption(option)
  }
}
</script>

<style lang="less">
</style>
